<!-- components/ContextMenu.vue -->
<template>
  <transition name="el-zoom-in-top">
    <div
      class="absolute z-50 bg-white shadow-lg rounded-md py-2 min-w-[160px] border border-gray-100"
      :style="{
        left: `${position.x}px`,
        top: `${position.y}px`,
      }"
    >
      <div
        v-for="item in menuItems"
        :key="item.action"
        class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 cursor-pointer transition-colors"
        @click="handleSelect(item.action)"
      >
        <el-icon class="mr-2"><component :is="item.icon" /></el-icon>
        <span v-if="item.type == null">{{ item.label }}</span>
        <el-dropdown v-else>
          <span class="el-dropdown-link">
            {{ item.label }}
            <el-icon class="el-icon--right" v-if="attachments">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <div v-for="(e, i) in attachments">
              <el-dropdown-item @click="showAttachment(e)">{{
                e
              }}</el-dropdown-item>
            </div>
          </template>
        </el-dropdown>
      </div>
    </div>
  </transition>
</template>

<script setup>
import {
  ref,
  defineProps,
  defineEmits,
  onMounted,
  toRef,
  nextTick,
  computed,
  watch,
} from "vue";
import {
  Picture as ModelIcon,
  Folder as AttachmentIcon,
  ArrowDown,
} from "@element-plus/icons-vue";

const props = defineProps({
  position: {
    type: Object,
    default: () => ({ x: 0, y: 0, modelID: null }),
  },
});

const attachments = ref([]);
watch(
  () => props.position.modelID,
  (newVal) => {
    attachments.value = window.modelFile[newVal];
  }
);
onMounted(() => {
  attachments.value = window.modelFile[props.position.modelID];
});

const emit = defineEmits(["select", "close"]);

const menuItems = [
  { action: "model", label: "显示模型", icon: ModelIcon },
  {
    action: "attachment",
    label: "显示附件",
    icon: AttachmentIcon,
    type: "dropdown",
  },
];
const showAttachment = (e) => {
  emit("showAttachment", e);
};
const handleSelect = (action) => {
  emit("select", action);
  emit("close");
};
</script>

<style scoped>
.menu-item:hover {
  @apply text-blue-600;
}
</style>
